<template>
  <view class="footer">
    <view class="base">
      <view class="input">
        <uv-input v-model="content" :focus='focus' :placeholder="placeholder" border='none' confirmType='send' placeholderStyle='font-size: 24rpx;color: #9C9C9C;font-weight: 400;' :customStyle="{backgroundColor: '#F0F0F0', height: '72rpx', paddingLeft: '18rpx'}" @confirm='submit'></uv-input>
      </view>
      <view class="right">
        <template v-if='content'>
          <button class="btn" hover-class="none" :disabled="disabled" @click='submit'>发送</button>
        </template>
        <template v-else>
          <template v-if="type == 'answer'">
            <view class="tips" @click="setCollect(detail.answer)">
              <view class="icon">
                <image src="../../static/tip1.png" class="img" v-if="detail.answer.is_collect == 0"></image>
                <image src="../../static/tip1-1.png" class="img" v-else></image>
              </view>
              <view class="number">{{ detail.answer.collect_num }}</view>
            </view>
            <view class="tips" @click="setLike(detail.answer)">
              <view class="icon">
                <image src="../../static/tip3.png" class="img" v-if="detail.answer.is_praise == 0"></image>
                <image src="../../static/tip3-1.png" class="img" v-else></image>
              </view>
              <view class="number">{{ detail.answer.like_num }}</view>
            </view>
          </template>
          <template v-else>
            <view class="tips" @click="setCollect(detail)">
              <view class="icon">
                <image src="../../static/tip1.png" class="img" v-if="detail.is_collect == 0"></image>
                <image src="../../static/tip1-1.png" class="img" v-else></image>
              </view>
              <view class="number">{{ detail.collect_num }}</view>
            </view>
            <view class="tips" @click="setLike(detail)">
              <view class="icon">
                <image src="../../static/tip3.png" class="img" v-if="detail.is_praise == 0"></image>
                <image src="../../static/tip3-1.png" class="img" v-else></image>
              </view>
              <view class="number">{{ detail.like_num }}</view>
            </view>
          </template>
        </template>
      </view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { post } from '@/api';
import { toast } from '@/common';

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  focus: {
    type: Boolean,
    default: false
  },
  peoper: {
    type: Object,
    default: () => {}
  },
  ladder: {
    type: [String, Number],
    default: 0
  },
  type: {
    type: String
  },
  ids: {
    type: [String, Number],
    default: 0
  }
})
const emit = defineEmits(['click']);
const obj = {
  theme: {
    type: 'theme_id',
    url: 'api/association_theme/themeComment',
    likeUrl: 'api/association_theme/likeTheme',
    collectUrl: 'api/association_theme/collectTheme'
  },
  news: {
    type: 'news_id',
    url: 'api/news/newsComment',
    likeUrl: 'api/news/likeNews',
    collectUrl: 'api/news/collectNews'
  },
  answer: {
    type: 'answer_id',
    url: 'api/association_answer/answerComment',
    likeUrl: 'api/association_answer/likeAnswer',
    collectUrl: 'api/association_answer/collectAnswer'
  }
}
let content = ref('');
let placeholder = ref('发表一条评论吧~');
let disabled = ref(false);

watch(() => props.peoper, (newValue) => {
  if(!uni.$uv.test.empty(newValue)){
    placeholder.value = `回复 ${newValue.nickname}`
  }
})
function submit(){
  if(!content.value) return toast('请输入内容');
  disabled.value = true;
  let params = {
    content: content.value
  }
  params[obj[props.type].type] = props.ids;
  console.log(params);
  let url = obj[props.type].url;
  if(props.ladder == 1){
    params.pid = props.peoper.id;
    params.puser_id = props.peoper.user_id;
    params.reply_comment_id = props.peoper.id;
    params.reply_comment_user_id = props.peoper.user_id;
  }else if(props.ladder == 2){
    params.pid = props.peoper.pid;
    params.puser_id = props.peoper.puser_id;
    params.reply_comment_id = props.peoper.id;
    params.reply_comment_user_id = props.peoper.user_id;
  }else{
    params.pid = 0;
    params.puser_id = 0;
    params.reply_comment_id = 0;
    params.reply_comment_user_id = 0;
  }
  console.log(props.peoper);
  console.log(params);
  // return;
  post(url, params).then(res => {
    disabled.value = false;
    console.log(res);
    if(res.code == 1){
      const data = res.data;
      content.value = '';
      toast('评论发布成功，积分+20');
      setTimeout(() => {
        emit('click')
      }, 1000)
    }
  })
}
// 点赞
function setLike(row){
  let params = {
    way: row.is_praise == 1 ? 2 : 1
  }
  params[obj[props.type].type] = row.id;
  let url = obj[props.type].likeUrl;
  post(url, params).then(res => {
    if(res.code == 1){
      if(row.is_praise == 1){
        row.is_praise = 0;
        row.like_num--;
      }else{
        row.is_praise = 1;
        row.like_num++;
      }
    }
  })
}
// 收藏
function setCollect(row){
  const params = {
    way: row.is_collect == 1 ? 2 : 1
  }
  params[obj[props.type].type] = row.id;
  let url = obj[props.type].collectUrl;
  post(url, params).then(res => {
    if(res.code == 1){
      if(row.is_collect == 1){
        row.is_collect = 0;
        row.collect_num--;
      }else{
        row.is_collect = 1;
        row.collect_num++;
      }
    }
  })
}
</script>

<style lang="scss" scoped>
  .footer{
    width: 100%;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    .base{
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      width: 100%;
      .input{
        width: 407rpx;
        height: 72rpx;
        line-height: 72rpx;
        background: #F0F0F0;
        border-radius: 72rpx;
        overflow: hidden;
        flex: 1;
      }
      .right{
        display: flex;
        align-items: center;
        padding-left: 32rpx;
        .btn{
          width: 150rpx;
          height: 72rpx;
          line-height: 72rpx;
          border-radius: 72rpx;
        }
        .tips{
          display: flex;
          align-items: center;
          &:first-child{
            padding-right: 37rpx;
          }
          .number{
            font-size: 28rpx;
            color: #737373;
            padding-left: 8rpx;
          }
          .icon{
            width: 40rpx;
            height: 40rpx;
            font-size: 0;
          }
        }
      }
    }
  }
</style>